<template>
	<!-- 分享 -->
	<view>
		<view :hidden="maskShare == false" class="alert-make">
			<view @tap="closeShare" class="alert-view-close" @longtap="closeShare" @touchmove="closeShare"></view>
			<view class="shareBox">
				<view class="shareTop">
					<view class="share-left" @tap="formSubmit">
						<image src="https://safood.supplyocta.com/Public/MallSmallApp/photo.png"></image>
						<view>生成海报</view>
					</view>
					<button class="share-right" open-type="share">
						<image src="/static/images/share-friends.png"></image>
						<view>转发</view>
					</button>
				</view>
				<view class="shareBottom" @tap="closeShare" :style="closeStyle">取消分享</view>
			</view>
		</view>不要被迷惑了
		<!-- 生成海报 -->
		<view class="alert-make" :hidden="maskHidden == false">
			<view @tap="closeHidden" class="alert-view-close" @longtap="closeHidden" @touchmove="closeHidden"></view>
			<view class="imagePathBox">
				<image :src="imagePath" class="code-img" mode="widthFix"></image>
			</view>
			<button class="save-img" @tap="saveImg">保存到相册</button>
		</view>

		<view class="canvas-box">
			<!-- #ifdef MP-WEIXIN -->
			<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" id="mycanvas" canvas-id="mycanvas"></canvas>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" id="mycanvas"></canvas>
			<!-- #endif -->
		</view>
	</view>
</template>
<script>
	var app = getApp().globalData;
	import {
		base64src
	} from "@/utils/base64";
	export default {
		name: 'share',
		props: {
			share: {
				type: Object,
				defalut: {}
			},
		},
		data() {
			return {
				maskHidden: false,
				maskShare: false,
				shareData: {},
				imagePath: '',
				type: 0,
				groupData: '',
				distributor_id: ''
			}
		},
		computed: {
			closeStyle() {
				return 'padding-bottom:' + (this.$store.bottomHeight + 20) + 'rpx';
			},
		},
		methods: {
			//点击关闭分享
			closeShare() {
				this.setData({
					maskShare: false,
				})
				this.$emit('close')
			},
			//点击关闭生成
			closeHidden() {
				this.setData({
					maskHidden: false,
				})
				this.$emit('close')
			},
			//点击生成
			formSubmit(e) {
				this.setData({
					maskShare: false,
				});
				this.code();
			},

			code() {
				/**
				 * &store_id => &s 门店id
				 * &distributor_id => &d 分销员id
				 * &share_uid => &su	分享人uid
				 * &share_guide_id => &sg	导购员id
				 * */
				console.log(this.shareData, 'shareData')
				var path = '';
				let store_id = this.shareData.goods.store_id ? this.shareData.goods.store_id : this.$store.store_id
				switch (this.type) {
					case 1:
						//门店商品详情
						path = '/pages/product/details/details?id=' + this.shareData.goods.id
						if (store_id) {
							path += '&s=' + store_id
						}
						if (this.shareData.goods.distributor_id) {
							path += '&d=' + this.shareData.goods.distributor_id;
						}
						if (this.shareData.guide_id) {
							path += '&sg=' + this.shareData.guide_id;
						}
						break;
					case 2:
						//门店拼团商品详情
						path = '/pages/index/Group-purchase-details/Group-purchase-details?id=' + this.shareData.goods_id;
						if (store_id) {
							path += '&s=' + store_id
						}
						break;
					case 3:
						//门店秒杀商品详情
						path = '/pages/index/Seckill-purchase-details/Seckill-purchase-details?id=' + this.shareData.goods_id;
						if (store_id) {
							path += '&s=' + store_id
						}
						break;
					case 4:
						//门店预售商品详情
						path = '/pages/index/advanceDetails/advanceDetails?id=' + this.shareData.goods_id;
						if (store_id) {
							path += '&s=' + store_id
						}
						break;
					case 5:
						// path = '/pages/mer/goods/details/details?id=' + this.shareData.goods.id
						path = '/pages/mer/goods/details/details?id=' + this.shareData.goods.gift_info.goods_id
						break;
				}
				console.log('path:', path);
				if (app.XcxData.userInfo.uid) {
					console.log(app.XcxData.userInfo.uid, 'app.XcxData.userInfo.uid')
					path += '&su=' + app.XcxData.userInfo.uid;
				}
				console.log('this.shareData.goods_img123123123121', this.shareData.goods_img)
				uni.showLoading({
					title: '生成中...'
				})
				this.getQrCode(path, {
					goods_img: this.shareData.goods_img,
					type: this.type,
					goods: this.shareData.goods,
					text: this.type == 1 || this.type == 5 ? null : this.groupData.text,
					status: this.type == 1 || this.type == 5 ? null : this.groupData.status,
					time: this.type == 1 || this.type == 5 ? null : this.groupData.time,
					success: (res) => {
						console.log('code:res', res)
						uni.hideLoading();
						this.setData({
							imagePath: res.path,
							maskHidden: true,
						});
						console.log(this.maskHidden)
					}
				});
			},

			// 获取二维码
			async getQrCode(path, param) {
				const res = await this.$request('SmallProgramApi/Share/shareQrCode_v2', {
					image_url: param.goods_img,
					path: path,
					avatar_url: this.$store.image_header + "details-bracground-no.png",
				}, false);
				if (res.status != 1) return uni.hideLoading() && uni.showModal({
					title: '错误',
					confirmText: '确定',
					content: res.message,
					showCancel: false,
				});

				//绘制二维码
				var qr_code = 'data:image/jpg;base64,' + uni.arrayBufferToBase64(uni.base64ToArrayBuffer(res.data.qr_code));
				var goods_img = 'data:image/jpg;base64,' + uni.arrayBufferToBase64(uni.base64ToArrayBuffer(res.data.goods_img));
				var border = 'data:image/jpg;base64,' + uni.arrayBufferToBase64(uni.base64ToArrayBuffer(res.data.avatar_url));
				base64src(goods_img, result => {
					base64src(border, res1 => {
						// #ifdef MP-WEIXIN
						this.createNewImg(qr_code, result, res1, param);
						// #endif
						// #ifdef MP-ALIPAY
						this.createNewImg(qr_code, goods_img, border, param)
						// #endif
					})
				})
			},
			//将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
			createNewImg(qr_code, goods_img, border, param) {
				console.log(1111111111)
				//商品图片
				var context = uni.createCanvasContext('mycanvas', this);
				context.setFillStyle('white');
				context.fillRect(0, 0, 375, 667)
				context.drawImage(goods_img, 0, 0, 375, 375);
				context.moveTo(0, 0); //设置起点状态
				context.lineTo(375, 0); //设置末端状态
				context.lineWidth = 10; //设置线宽状态
				context.strokeStyle = 'red'; //设置线的颜色状态
				context.stroke(); //进行绘制
				context.drawImage(border, 0, 0, 375, 375);
				if ((param.type == 2 || param.type == 3 || param.type == 4) && param.status == 1) {
					var timeImg = "/static/images/round-white.png";
					context.drawImage(timeImg, 218, 348, 20, 20);
					context.drawImage(timeImg, 255, 348, 20, 20);
					context.drawImage(timeImg, 290, 348, 20, 20);
					context.drawImage(timeImg, 325, 348, 20, 20);
				}
				//商品价格
				var title; //价格标题
				var price; //当前条件下的价格
				var right_len = 0; //价格向右距离
				var original_price = param.goods.online_price ? param.goods.online_price : 0; //原价
				switch (param.type) {
					case 1:
					case 5:
						title = '零售价';
						price = param.goods.online_price;
						if (param.goods.act_price && param.goods.promotion_status == 1) {
							title = '促销价';
							price = param.goods.act_price;
						} else if (param.goods.plus_mem_status == 1 && param.goods.plus_price > 0) {
							title = 'PLUS会员价';
							right_len = 46;
							price = param.goods.plus_price; //plus会员价
						} else if (param.goods.shop_mem_price > 0 && param.goods.shop_mem_status == 1) {
							title = '会员价';
							price = param.goods.shop_mem_price; //会员价
						}
						break;
					case 2:
						title = '拼团价';
						price = param.goods.act_price;
						break;
					case 3:
						title = '秒杀价';
						price = param.goods.spike_price;
						break;
					case 4:
						title = '预售价';
						price = param.goods.advance_price;
						break;
				}
				context.setFontSize(14);
				context.setFillStyle('white');
				context.fillText(title, 35, 335);
				context.setFontSize(12);
				context.fillText('￥', 22, 365);
				context.setFontSize(24);
				context.fillText(price, 35, 365);
				context.stroke();

				//时间
				if (param.type != 1 && param.type != 5) {
					//倒计时
					context.setFontSize(14);
					context.setFillStyle('white');
					context.fillText(param.text, 160, 363);
					context.stroke();
					if (param.time[0] < 10) {
						//倒计时 天
						context.setFontSize(10);
						context.setFillStyle('black');
						context.fillText(param.time[0], 224, 363);
						context.setFontSize(12);
						context.setFillStyle('white');
						context.fillText('天', 240, 363);
						context.stroke();
					} else if (param.time[0].length < 100) {
						//倒计时 天
						context.setFontSize(10);
						context.setFillStyle('black');
						context.fillText(param.time[0], 221, 363);
						context.setFontSize(12);
						context.setFillStyle('white');
						context.fillText('天', 240, 363);
						context.stroke();
					} else {
						//倒计时 天
						context.setFontSize(10);
						context.setFillStyle('black');
						context.fillText(param.time[0], 219, 363);
						context.setFontSize(12);
						context.setFillStyle('white');
						context.fillText('天', 240, 363);
						context.stroke();
					}

					//倒计时 时
					context.setFontSize(10);
					context.setFillStyle('black');
					context.fillText(param.time[1], 259, 363);
					context.stroke();
					context.setFontSize(12);
					context.setFillStyle('white');
					context.fillText('时', 277, 363);
					context.stroke();

					//倒计时 分
					context.setFontSize(10);
					context.setFillStyle('black');
					context.fillText(param.time[2], 294, 363);
					context.setFontSize(12);
					context.setFillStyle('white');
					context.fillText('分', 312, 363);
					context.stroke();

					//倒计时 秒
					context.setFontSize(10);
					context.setFillStyle('black');
					context.fillText(param.time[3], 329, 363);
					context.setFontSize(12);
					context.setFillStyle('white');
					context.fillText('秒', 348, 363);
					context.stroke();
				}

				//商品名称
				context.setFontSize(18);
				context.setFillStyle('black');
				context.fillText(param.goods.goods_name, 15, 400);
				context.stroke();

				console.log(2222222222)
				//商品价格
				context.setFontSize(16);
				context.setFillStyle('red');
				context.fillText(title, 18, 450);
				context.setFontSize(16);
				context.fillText('￥', 68 + right_len, 450);
				context.setFontSize(24);
				context.fillText(price, 85 + right_len, 450);
				if (price * 1 < original_price * 1) {
					context.setFontSize(14);
					context.setFillStyle('#999');
					context.fillText('原价', 195 + right_len, 450);
					context.fillText('￥', 222 + right_len, 450);
					context.fillText(original_price, 240 + right_len, 450);
					context.setLineWidth(0.5);
					context.setStrokeStyle("#aaaaaa");
					var len = (String(original_price).length + 10) * 6;
					context.moveTo(190 + right_len, 445);
					context.lineTo(190 + right_len + len, 445);
					context.stroke();
				}

				base64src(qr_code, res => {
					// #ifdef MP-WEIXIN
					context.drawImage(res, 110, 470, 150, 150);
					// #endif
					// #ifdef MP-ALIPAY
					context.drawImage(qr_code, 110, 470, 150, 150);
					// #endif
					context.stroke();
					context.setFontSize(16);
					context.setFillStyle('black');
					context.fillText('长按二维码识别', 133, 640);
					context.stroke();
					//绘制
					context.draw();
					//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
					console.log(33333333333)

					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: 'mycanvas',
							success: (res) => {
								console.log('canvasToTempFilePath:success', res)
								var tempFilePath = res.tempFilePath;
								uni.getImageInfo({
									src: tempFilePath,
									success: (res) => {
										console.log('getImageInfo:success', typeof param.success, res)
										if (res.path) {
											if (typeof param.success == "function") {
												app.clearDir();
												param.success(res);
											}
										}
									},
									fail: (res) => {
										console.error('getImageInfo:fail', res)
										uni.hideLoading();
									}
								})
								uni.hideLoading();
							},
							fail: (res) => {
								console.error('canvasToTempFilePath:fail', res)
								uni.hideLoading();
							},
							// #ifdef MP-WEIXIN
						}, this);
						// #endif
						// #ifndef MP-WEIXIN
					});
					// #endif
				}, 200);
			})
	},

	//点击保存到相册
	saveImg() {
		app.saveImg({
			url: this.imagePath,
			success: () => {
				this.setData({
					maskHidden: false,
					maskShare: false,
				})
				this.$emit('close')
			}
		});
	},
	},
	mounted() {
		console.log(this.$props.share  ,'123123123')
		this.setData({
			maskHidden: this.$props.share.maskHidden,
			maskShare: this.$props.share.maskShare,
			shareData: this.$props.share.data,
			groupData: this.$props.share.type == 1 || this.type == 5 ? '' : this.$props.share.data.groupData,
			type: this.$props.share.type,
			distributor_id: this.$props.share.self_distributor_id ? this.$props.share.self_distributor_id : this.$props.share.distributor_id
		})
	}
	}
</script>
<style>

</style>
